<template>
  <div>
    <h2>正在测试自定义指令</h2>
    <p v-color:font>字体颜色为默认色</p>
    <p v-color:font="color">字体颜色为红色</p>
    <p v-color:font="'green'">字体颜色为绿色</p>
    <p v-color:background>背景色为默认色</p>
    <p v-color:background="'yellow'">背景色为黄色</p>
    <p v-color:background="color">背景色为粉色</p>
    <input type="button" @click="change" value="修改颜色">
  </div>
</template>

<script setup>
import {ref} from "vue";

const color = ref("red");

function change(){
  color.value = "blue";
}

const vColor = {
  created(el, binding){
    // console.log(el);
    // console.log(binding)
    const c = binding.value || "#ccc";
    if(binding.arg === "font"){
      el.style.color = c;
    }else if(binding.arg === "background"){
      el.style.backgroundColor = c;
    }
  },
  updated(el, binding){
    const c = binding.value || "#ccc";
    if(binding.arg === "font"){
      el.style.color = c;
    }else if(binding.arg === "background"){
      el.style.backgroundColor = c;
    }
  }
}
</script>